<!--
 * @Descripttion: 
 * @version: 
 * @Author: Peanut
 * @Date: 2024-04-20 16:19:18
 * @LastEditors: Peanut
 * @LastEditTime: 2024-04-29 09:51:49
-->
<template>
  <div class="checkRecordManagePage">
    <div class="searchBox">
      <el-form
        :inline="true"
        :model="params"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col>
            <el-form-item label="检测编号：" prop="reportId">
              <el-input
                v-model="params.reportId"
                placeholder="请输入报告检测编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="检测用户：" prop="name">
              <el-input
                v-model="params.name"
                placeholder="请输入检测用户"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tableBody">
      <el-table :data="reportListData" border style="width: 100%">
        <el-table-column fixed prop="id" label="检测编号" align="center">
        </el-table-column>

        <el-table-column prop="datetime" label="检测时间" align="center">
        </el-table-column>
        <el-table-column prop="name" label="检测用户" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              <i class="el-icon-view"></i>查看检测报告
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="reportListData.length"
        :current-page.sync="params.pageNum"
        :page-size="params.pageSize"
        @size-change="
          (e) => {
            params.pageSize = e;
            getList();
          }
        "
        @current-change="
          (e) => {
            params.pageNum = e;
            getList();
          }
        "
        align="right"
        :style="{ marginTop: 30 + 'px' }"
      >
      </el-pagination>
    </div>
    <Report
      v-if="ReportShow"
      :dialogVisible="ReportShow"
      :reportId="reportId"
      @handleClose="
        (val) => {
          ReportShow = false;
        }
      "
    ></Report>
  </div>
</template>

<script>
import Report from "./report.vue";
export default {
  props: {},
  data() {
    return {
      params: {
        reportId: "",
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      ReportShow: false,
      reportListData: [],
      reportId: "",
    };
  },
  components: {
    Report,
  },
  mounted() {
    this.getList();
  },

  methods: {
    //此处是调取检测报告信息列表的接口
    getList() {
      axios
        .post("http://localhost:8080/admin/findUserRecordBySearch", this.params)
        .then((res) => {
          if (res.code == 1) {
            this.reportListData = res.data.list;
          }
        });
    },
    handleClick(val) {
      this.reportId = val.id;
      this.ReportShow = true;
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.checkRecordManagePage {
  .searchBox {
    margin: 20px 0 50px;
    display: flex;
    justify-content: space-between;
    .el-form {
      width: 100%;
      .el-row {
        display: flex;
        justify-content: space-between;
        .el-form-item {
          display: flex;
          /deep/.el-form-item__label {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
